<template>
  <div>
    <Header></Header>
    <div id="background">
      <div id="content">
        <v-card class="mx-auto my-12" max-width="1000">
          <div id="carousel">
            <v-carousel
              cycle
              interval="3000"
              :show-arrows="false"
              height="250px"
            >
              <v-carousel-item
                v-for="(item, i) in items"
                :key="i"
                :src="item.src"
              ></v-carousel-item>
            </v-carousel>
          </div>
          <v-card-title> 今日热搜 </v-card-title>

          <v-card-text> </v-card-text>
          <v-divider class="mx-4"></v-divider>
          <div>
            <el-autocomplete
              id="_select"
              v-model="state"
              :fetch-suggestions="querySearchAsync"
              placeholder="搜索想要的曲谱"
              suffix-icon="el-icon-search"
              hide-loading
              @select="handleSelect"
            ></el-autocomplete>
          </div>
          <v-divider class="mx-4"></v-divider>
          <v-card-title> 最新发布 </v-card-title>
          <article
            class="excerpt excerpt-1"
            v-for="(item, index) in barton_data_list"
            :key="index"
          >
            <a class="focus" target="_blank" @click="skip(item.id)">
              <img :src="item.images" alt="" class="thumb lazy" id="smy" />
            </a>
            <div style="text-align: left">
              <a href="" class="cat" target="_blank">
                吉他谱
                <i></i>
              </a>
              <h2>
                <a target="_blank" @click="skip(item.id)">{{
                  item.song_name
                }}</a>
              </h2>
              <p class="meta">
                <time>
                  <v-icon dense> mdi-alarm-multiple </v-icon>
                  {{ item.release_time }}
                </time>
                <span class="pv">
                  <v-icon dense> mdi-eye-outline </v-icon>
                  阅读({{ item.read_number }})
                </span>
                <span class="pc">
                  <v-icon dense> mdi-emoticon-happy-outline </v-icon>
                  作者({{ item.author }})
                </span>
              </p>
              <p class="note">
                {{ item.brief_introduction }}
              </p>
            </div>
          </article>
          <p>
            <el-pagination
              @current-change="change"
              :page-size="1"
              background
              layout="prev, pager, next"
              :total="total"
            >
            </el-pagination>
          </p>

          <v-card-actions></v-card-actions>
        </v-card>
        <div>
          <el-dialog title="上传曲谱" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="曲谱名称" :label-width="formLabelWidth">
                <el-input
                  type="text"
                  placeholder="请输入曲谱名称"
                  maxlength="32"
                  v-model="form.song_name"
                  clearable
                  show-word-limit
                  style="width: 80%"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="曲子作者" :label-width="formLabelWidth">
                <el-input
                  type="text"
                  placeholder="请输入作者"
                  maxlength="32"
                  v-model="form.author"
                  clearable
                  show-word-limit
                  style="width: 80%"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="曲谱简介" :label-width="formLabelWidth">
                <el-input
                  type="textarea"
                  placeholder="请输入曲谱简介"
                  maxlength="255"
                  v-model="form.brief_introduction"
                  clearable
                  show-word-limit
                  style="width: 80%"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="上传曲谱图片" :label-width="formLabelWidth">
                <el-upload
                  action="http://127.0.0.1:8000/barton/upload_images/"
                  list-type="picture-card"
                  auto-upload
                  name="image"
                  :on-success="onSuccess"
                >
                  <i slot="default" class="el-icon-plus"></i>
                  <div slot="file" slot-scope="{ file }" style="height: 100%">
                    <img
                      class="el-upload-list__item-thumbnail"
                      :src="file.url"
                      alt=""
                    />
                    <span class="el-upload-list__item-actions">
                      <span
                        class="el-upload-list__item-delete"
                        @click="handleRemove(file)"
                      >
                        <i class="el-icon-delete"></i>
                      </span>
                    </span>
                  </div>
                </el-upload>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="submit()">确 定</el-button>
            </div>
          </el-dialog>
        </div>
      </div>
      <div
        style="
          width: 15rem;
          height: 8rem;
          position: fixed;
          bottom: 2rem;
          right: 0.5rem;
        "
      >
        <el-tooltip
          class="item"
          effect="dark"
          content="上传曲谱"
          placement="left-start"
        >
          <v-btn
            class="mx-2"
            fab
            dark
            large
            color="indigo"
            @click="dialogFormVisible = true"
          >
            <v-icon dark> mdi-plus</v-icon>
          </v-btn>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script>
import "../plugins/coin-slider.js";
import Header from "../Base/Header.vue";
import { mdiCursorPointer } from "@mdi/js";
import { mdiAlarmMultiple } from "@mdi/js";
import { mdiEyeOutline } from "@mdi/js";
import { mdiEmoticonHappyOutline } from "@mdi/js";
import { Message } from "element-ui";
export default {
  components: {
    Header,
  },
  data() {
    return {
      items: [
        {
          src:
            "http://qmrcjhv9u.hb-bkt.clouddn.com/vladstudio_man_with_very_long_hand_wallpaper.jpg",
        },
        {
          src:
            "http://qmrcjhv9u.hb-bkt.clouddn.com/vladstudio_musiceater_wallpaper.jpg",
        },
        {
          src:
            "http://qmrcjhv9u.hb-bkt.clouddn.com/vladstudio_rock_show_wallpaper.jpg",
        },
      ],
      barton_data_list: [],
      song_name_list: [],
      restaurants: [],
      state: "",
      timeout: null,
      page: 1,
      total: 0,
      dialogFormVisible: false,
      form: {
        song_name: "",
        author: "",
        brief_introduction: "",
        path_list: [],
      },
      formLabelWidth: "100px",
    };
  },
  // 钩子函数
  mounted: function () {
    this.get_barton_data();
    this.restaurants = this.loadAll();
  },
  methods: {
    change(page) {
      this.get_barton_data(page);
    },
    get_barton_data(page = 0) {
      let _data = [];
      this.axios
        .get("http://127.0.0.1:8000/barton/qiniu/", { params: { page: page } })
        .then((result) => {
          if (result.data.code == 200) {
            var data_list = result.data.data;
            this.total = result.data.total;
            for (let index in data_list) {
              if (data_list[index].brief_introduction.length > 40) {
                var brief_introduction =
                  data_list[index].brief_introduction.substr(0, 40) + "...";
              } else {
                var brief_introduction = data_list[index].brief_introduction;
              }
              _data.push({
                id: data_list[index].id,
                song_name: data_list[index].song_name,
                author: data_list[index].author,
                brief_introduction: brief_introduction,
                read_number: data_list[index].read_number,
                images:
                  "http://qmrcjhv9u.hb-bkt.clouddn.com/" +
                  data_list[index].images.split(",")[0],
                release_time: data_list[index].release_time.split("T")[0],
              });
            }
            this.barton_data_list = _data;
          } else {
            this.$message({
              type: "error",
              message: result.data.msg,
            });
          }
        });
    },
    loadAll() {
      return this.song_name_list;
    },
    querySearchAsync(queryString, cb) {
      if (queryString == "") {
        this.get_barton_data();
      }
      this.axios
        .get("http://127.0.0.1:8000/barton/dim_song_name/", {
          params: { dim_params: queryString },
        })
        .then((result) => {
          if (result.data.code == 200) {
            var data_list = [];
            for (let index in result.data.data) {
              data_list.push({
                value: result.data.data[index].song_name,
                id: result.data.data[index].id,
              });
            }
            clearTimeout(this.timeout);
            this.timeout = cb(data_list);
          } else {
            this.$message({
              type: "error",
              message: result.data.msg,
            });
          }
        });
    },
    handleSelect(item) {
      let _data = [];
      this.axios
        .get("http://127.0.0.1:8000/barton/qiniu/", {
          params: { song_id: item.id },
        })
        .then((result) => {
          if (result.data.code == 200) {
            var data_list = result.data.data;
            this.total = result.data.total;
            for (let index in data_list) {
              if (data_list[index].brief_introduction.length > 40) {
                var brief_introduction =
                  data_list[index].brief_introduction.substr(0, 40) + "...";
              } else {
                var brief_introduction = data_list[index].brief_introduction;
              }
              _data.push({
                id: data_list[index].id,
                song_name: data_list[index].song_name,
                author: data_list[index].author,
                brief_introduction: brief_introduction,
                read_number: data_list[index].read_number,
                images:
                  "http://qmrcjhv9u.hb-bkt.clouddn.com/" +
                  data_list[index].images.split(",")[0],
                release_time: data_list[index].release_time.split("T")[0],
              });
            }
            this.barton_data_list = _data;
          } else {
            this.$message({
              type: "error",
              message: result.data.msg,
            });
          }
        });
    },
    skip(id) {
      this.$router.push({
        path: "/song_details",
        query: {
          id: id,
        },
      });
    },
    handleRemove(file) {
      console.log(file);
    },
    onSuccess(data) {
      if (data.code == 200) {
        this.form.path_list.push(data.img_name);
      } else {
        this.$message({
          type: "error",
          message: result.data.msg,
        });
      }
    },
    submit() {
      this.axios
        .post("http://127.0.0.1:8000/barton/qiniu/", this.form)
        .then((result) => {
          if (result.data.code == 200) {
            this.$message({
              type: "success",
              message: result.data.msg,
            });
            this.dialogFormVisible = false;
            location.reload();
          } else {
            this.$message({
              type: "error",
              message: result.data.msg,
            });
          }
        });
    },
  },
};
</script>


<style>
@import url("http://www.shaomingyang.com/skin/css/main.css");
/* @import url('http://www.fontawesome.com.cn/wp-content/themes/deeptimes/fonts/font-awesome/css/font-awesome.min.css'); */
#background {
  height: 100%;
  overflow: hidden;
  background: url(../images/brang.png) repeat, center center / 100% 100%;
}
#content {
  text-align: center;
}
#carousel {
  width: 100%;
}
#text-field {
  text-align: center;
}
#_select {
  background: rgba(94, 93, 93, 0.06);
  height: 40px;
  width: 500px;
}
.el-autocomplete-suggestion {
  top: 520px !important;
}
#el-button.is-circle {
  border-radius: 50%;
  padding: 30px;
}
</style>